<template>
  <div class="container">
    <el-row>
      <el-col :span="6"> 【题型】:{{ ti[questionsLIst.questionType] }} </el-col>
      <el-col :span="6"> 【编号】:{{ questionsLIst.id }} </el-col>
      <el-col :span="6"> 【难度】:{{ nan[questionsLIst.difficulty] }} </el-col>
      <el-col :span="6"> 【标签】:{{ questionsLIst.tags }} </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 【学科】:{{ questionsLIst.subjectName }} </el-col>
      <el-col :span="6"> 【目录】:{{ questionsLIst.directoryName }} </el-col>
      <el-col :span="6"> 【方向】:{{ questionsLIst.direction }} </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col :span="4"> 【题干】: </el-col>
    </el-row>
    <span v-html="questionsLIst.question" style="color: blue"></span>
    <div v-if="questionsLIst.questionType !== 3">
      <el-row>
        <el-col :span="10">
          单选题 选项：（以下选中的选项为正确答案）
        </el-col>
      </el-row>
      <!-- 选项 -->
      <div class="el-radio-group" v-if="questionsLIst.questionType === 1">
        <el-radio :label="i.id" v-for="i in questionsLIst.options" :key="i.id" v-model="sours" @click="change">{{ i.title }}</el-radio>
      </div>
      <div class="el-radio-group" v-if="questionsLIst.questionType === 2">
        <el-checkbox :label="i.id" v-for="i in questionsLIst.options" :key="i.id" v-model="soursCheck" @change="change">{{ i.title }}</el-checkbox>
      </div>
    </div>
    <hr />
    <el-row>
      【参考答案】：<el-button type="danger" size="small" @click="Video = true">视频答案预览</el-button>
      <div>
        <video :src="questionsLIst.videoURL" class="video" autoplay controls v-if="Video"></video>
      </div>
    </el-row>
    <hr />
    <el-row class="jiexi">
      <div style="margin: 14px 0">【答案解析】：</div>
      <span v-html="questionsLIst.answer"></span>
    </el-row>
    <el-row> 【题目备注】：{{ questionsLIst.remarks }} </el-row>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'questionsPreview',
  data() {
    return {
      nan: ['简单', '一般', '困难'],
      ti: ['单选题', '多选题', '简答题'],
      questionsLIst: [],
      sours: 0,
      soursCheck: [],
      Video: false
    }
  },
  props: ['TableID'],
  created() {
    this.getList()
  },
  methods: {
    getList() {
      detail({ id: this.TableID }).then(data => {
        this.questionsLIst = data.data
        if (data.data.questionType === 1) {
          data.data.options.forEach(i => {
            if (i.isRight === 1) {
              return (this.sours = i.id)
              // return this.sours = i.id
            }
          })
        } else if (data.data.questionType === 2) {
          data.data.options.forEach(i => {
            if (i.isRight === 1) {
              return this.soursCheck.push(i.id)
            }
          })
        }
      })
      //   .catch(err => {
      //     this.$message.e('错了哦，这是一条错误消息')
      // })
    },
    change() {
      return false
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .el-row {
    margin-bottom: 20px;
  }
  .el-radio-group {
    display: flex;
    flex-direction: column;
    .el-radio,
    .el-checkbox {
      margin-bottom: 20px;
    }
  }
  .jiexi {
    display: flex;
  }
  .video {
    width: 400px;
    height: 300px;
  }
}
</style>
